@import '../styles/var.scss';
@import '../styles/hairline.scss';

.van-tag {
  display: inline-block;
  padding: 2px 5px;
  line-height: normal;
  border-radius: 3px;
  font-size: 10px;
  background: $gray;
  color: $white;

  &::after {
    border-color: currentColor;
    border-radius: 4px;
  }

  &--mark {
    padding-right: 7px;
    border-radius: 0 8px 8px 0;

    &::after {
      border-radius: 0 16px 16px 0;
    }
  }

  &--success {
    background: $green;

    &.van-tag--plain {
      color: $green;
    }
  }

  &--danger {
    background: $button-danger-background-color;

    &.van-tag--plain {
      color: $button-danger-background-color;
    }
  }

  &--primary {
    background: $blue;

    &.van-tag--plain {
      color: $blue;
    }
  }

  &--plain {
    background: $white;
    color: $gray;
  }
}